<div id="templage-edit-dom">
    <div class="row">
        <p></p>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="templage-edit-name1" class="col-sm-2 control-label">模版名称</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" :readonly="saveBtnIsDisabled" v-model="template.templateName" id="templage-edit-name1"
                        placeholder="模版名称">
                </div>
            </div>
            <div class="form-group">
                <label for="templage-edit-desc" class="col-sm-2 control-label">模版说明</label>
                <div class="col-sm-10">
                    <textarea :readonly="saveBtnIsDisabled" v-model="template.templateDesc" class="form-control" rows="3"></textarea>
                </div>
            </div>

            <div class="form-group">
                <label for="ineditRadio1" class="col-sm-2 control-label">状态</label>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" v-model="template.templateStatus" name="templateStatus" id="ineditRadio1" value="1"> 正常
                    </label>
                    <label class="radio-inline">
                        <input type="radio" v-model="template.templateStatus" name="templateStatus" id="ineditRadio2" value="2"> 禁用
                    </label>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="button" @click="saveTemplate" :class="{disabled:saveBtnIsDisabled}" class="btn btn-default"
                        value="保存"></input>
                    <input :class="{disabled:addItemIsDisabled}" @click="showAddItem" type="button"
                        class="btn  btn-default" value="新增模版项"></input>
                </div>
            </div>
        </form>
    </div>
    <div class="row panel panel-default">
        <div class="panel-heading">模版项列表</div>
        <div class="panel-body">
            <table class="table table-bordered">
                <tr>
                    <th>#</th>
                    <th>项目名称</th>
                    <th>项目占比</th>
                    <th>项目满分值</th>
                    <th>最后修改时间</th>
                    <th>状态</th>
                    <th>&nbsp;</th>
                </tr>
                <tr v-for="item in templateItems">
                    <td>{{item.itemid}}</td>
                    <td>{{item.itemName}}</td>
                    <td>{{item.itemProportion}}</td>
                    <td>{{item.itemMaxScore}}</td>
                    <td>{{item.modifyTime}}</td>
                    <td>{{item.itemStatus ==1 ?'正常':'废弃'}}</td>
                    <td>
                        <a href="#" @click.prevent="showEditItem(item.itemid)" class="btn btn-default">编辑</a>
                        <a href="#" @click.prevent="deleteItem(item.itemid)" class="btn btn-default">删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- 弹窗 -->
    <div class="modal fade" id="template-edit-win" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="template-editName1" class="col-sm-2 control-label">项目名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="templateItem.itemName" id="template-editName1"
                                    placeholder="项目名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="template-editProportion1" class="col-sm-2 control-label">项目占比</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="templateItem.itemProportion"
                                    id="template-editProportion1" placeholder="项目占比">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="template-editMaxScore" class="col-sm-2 control-label">项目满分值</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="templateItem.itemMaxScore"
                                    id="template-editMaxScore" placeholder="项目满分值">
                            </div>
                        </div>
                        <div class="form-group" v-show="!isSaveItem">
                            <label for="inlinestatusRadio1" class="col-sm-2 control-label">状态</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" v-model="templateItem.itemStatus" name="itemStatus"
                                        id="inlinestatusRadio1" value="1"> 正常
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" v-model="templateItem.itemStatus" name="itemStatus"
                                        id="inlinestatusRadio2" value="2"> 禁用
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" @click="saveItem" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    
</div>
<script>
    let appTemplateEditDom = Vue.createApp({
        data() {
            return {
                template: {
                    templateId:window.editTemplateId // 绑定 id 
                },//保存模板表单数据绑定
                saveBtnIsDisabled: false,// 保存按钮 输入状态
                addItemIsDisabled: false,
                templateItem: {},//弹窗 模板项表单
                templateItems: [],//模板项列表
                isSaveItem: true  // 状态 选项
            }
        },
        mounted() {
           
            // 加载数据
            // 模版数据
            axios.get("http://localhost:8080/template/get",{params:{templateId:this.template.templateId}})
            .then((res)=>{
                this.template = res.data;
               
                // 模版项列表
                axios.get("http://localhost:8080/templateItem/queryByTemplateId",{params:{tempId:this.template.templateId}})
                .then((res)=>{
                    this.templateItems = res.data;
                });
            });
        },
         methods: {
            showAddItem() {
                $("#template-edit-win").modal('show');
            },
            saveTemplate(){
               
                if(this.template.templateName==''|| this.template.templateName==undefined){
                    showMsg("模板必须有标题","提示");
                    return 
                }
                axios.post("http://localhost:8080/template/update",this.template).then((res)=>{
                    if(res.data.status==505){
                        showMsg("模版名称重复","提示");
                        // 可以切换模版标题输入框的样式
                    }else{
                        showMsg("保存成功","保存提示");
                        //保存按钮禁用，表单只读， 新增模版项按钮启用, 将返回的template对象保存到this中的
                       
                        this.template=res.data.data
                    }
                });
            
            },
            saveItem() {
                 // 校验数据(略)
                // 判断是保存还是编辑

                if(this.isSaveItem){
                     // 给模版项设置模版编号
                    this.templateItem.templateId=this.template.templateId;
                     // 开始提交数据
                    axios.post("http://localhost:8080/templateItem/save",this.templateItem).then((res)=>{
                        if(res.data.status==505){
                            showMsg("模版项名称重复");
                        }else if(res.data.status==200){
                            console.log(res.data)
                             //关闭窗体
                             $("#template-edit-win").modal('hide');
                            //清空窗体数据
                            this.templateItem={}
                           
                            //添加到模板项中
                            this.templateItems.push(res.data.data)
                        }
                    });

                }else{
                    //编辑 更新
                    axios.post("http://localhost:8080/templateItem/update",this.templateItem).then((res)=>{
                        if(res.data.status==505){
                            showMsg("模版项名称重复");
                        }else if(res.data.status==200){
                             //关闭窗体
                             $("#template-edit-win").modal('hide');
                            //清空窗体数据
                            this.templateItem={}
                           
                            //更新到模板项中
                            for( let x=0;x<this.templateItems.length;x++){
                                //找到就更新
                                if(this.templateItems[x].itemid==res.data.data.itemid){
                                    this.templateItems[x]=res.data.data
                                    break
                                }
                            }
                        }

                        this.isSaveItem = true;// 还原标志
                    });
                }

            },
            showEditItem(itemId) {
                axios.get("http://localhost:8080/templateItem/get",{params:{itemid:itemId}}).then((res=>{
                    //修改状态
                    // 查询数据，修改isSaveItem为false，弹窗,
                    this.isSaveItem=false;
                    this.templateItem=res.data;
                    $("#template-edit-win").modal('show');
                }))
            },
            deleteItem(itemId) {

            }
        }
    });
    appTemplateEditDom.mount("#templage-edit-dom");
</script>